<template>
  <div class="container">
    <header>分配权限</header>
    <!-- 设置一个值:default-expanded-keys="[0,1]" -->
    <div class="wrap">
      <!-- <h1>{{$storer.state.selectUserId}}</h1> -->
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="[0]"
        highlight-current
        :props="defaultProps"
      ></el-tree>
    </div>
    <div class="btnGroup">
      <el-button
        @click="getCheckedNodes"
        size="mini"
        type="primary"
        style="margin-right: 10px"
        >确定</el-button
      >
      <!-- <el-button @click="setCheckedNodes">设置选中的</el-button> -->
      <el-button @click="cancel" size="mini">取消</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Littlehow } from "../../assets/js/util";
import Utils from "../../assets/js/tree";
export default {
  props: ["roleAssignmentId"],
  created() {
    this.getAllMenu();
  },
  mounted() {
    var _this = this
    Utils.$on("shi1", () => {
      _this.getAllMenu()
    });
  },
  methods: {
    // 获取所有权限
    getAllMenu() {
      axios
        .post("/api/sys/role/queryRoleByMenu", {})
        .then((res) => {
          console.log("获取成功");
          console.log(res);
          var datas = res.data.data.distributorNotRoles;
          // console.log(datas)
          var format = {
            id: "id", //菜单编号，作为树形查找id
            root: "-1", //顶层节点的parentId是root
            pid: "parentId", //父节点标识字段为parentId
            child: "children", //构造出的树形子节点数组名为children
            sort: { field: "sortNo", direct: 1 },
          }; //排序字段为sortNo，且正序
          var result = Littlehow.tree.format(datas, format);
          this.data = result;
          this.listId = res.data.data.distributorRoles;
        })
        .catch((err) => {
          console.log("获取失败");
        });
    },
    nav() {
      axios
        .post("/api/sys/menu/nav", {})
        .then((res) => {
          // console.log("数据是")
          console.log(res.data.permission);
          var btnGroup = res.data.permission;
          btnGroup = JSON.stringify(btnGroup);
          sessionStorage.setItem("btnGroup", btnGroup);
          // var timer = new data
        })
        .catch((err) => {
          // alert("数据是")
          console.log(err);
        });
    },
    open2() {
      layer.open({
        content: "分配权限成功",
        skin: "msg",
        time: 2, //1秒后自动关闭
      });
    },
    open3() {
      layer.open({
        content: "分配权限失败",
        skin: "msg",
        time: 2, //1秒后自动关闭
      });
    },
    //用户选中的
    getCheckedNodes() {
      let selectId = this.$store.state.selectUserId;
      let getModul = this.$refs.tree.getCheckedNodes(false, true);
      // this.$refs.tree.getCheckedNodes(false, true);
      var dataes = this.collectId(getModul);
      var menusa = dataes;
      axios
        .post("/api/sys/role/addRoleByMenu", { menu: menusa, id: selectId })
        .then((res) => {
          console.log("成功");
          this.nav();
          Utils.$emit("demo");
          console.log(res);
          this.open2();
          this.$refs.tree.setCheckedKeys([]);
        })
        .catch((err) => {
          console.log(err);
          this.open3();
        });
      // this.data=[]
      this.$emit("handCancel");
    },
    // 清空选中的
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    //设置选中
    setCheckedNodes() {
      console.log(this.$store.state.echo);
      this.echoList = this.$store.state.echo;
      // alert(this.echoList)
      console.log("开始打印");
      console.log(this.echoList);
      this.resetChecked();
      setTimeout(() => {
        // alert(this.echoList.length)
        this.echoList.forEach((val) => {
          console.log(val);
          this.$refs.tree.setChecked(val, true, false);
        });
      }, 500);

      // setTimeout(() => {
      // this.$refs.tree.setCheckedNodes(this.echoList);
      // }, 0);
    },
    //获取所有的id
    collectId(arr, ids = []) {
      arr.forEach(({ id, childList }) => {
        if (id) {
          ids.push(id);
        }
        if (childList) {
          this.collectId(childList, ids);
        }
      });
      console.log(ids);
      this.idGroup = ids;
      return ids;
    },
    cancel() {
      // this.data=[]
      this.$refs.tree.setCheckedKeys([]);
      this.$emit("handCancel");
      this.echoList = null;
    },
  },

  data() {
    return {
      listId: [],
      data: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      echoList: null,
    };
    idGroup: null;
  },
  watch: {
    roleAssignmentId(n, o) {
      console.log(n, o);
    },
  },
};
</script>

<style scoped>
header {
  font-size: 16px;
  padding: 5px 0;
  margin-bottom: 5px;
}
.container {
  height: 450px;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 500px;
  transform: translate(-50%, -50%);
  width: 260px;
  padding: 20px;
  padding-top: 3px;
  background: white;
  overflow-y: auto;
  /* border: 1px solid #ff0fff; */
  padding-bottom: 10px;
  /* background: #ccc; */
}
.wrap {
  height: 400px;
  overflow-y: scroll;
  /* position: relative; */
}
/* .buttons{
    position: absolute;
    z-index: 999999999999999999999999;
    left: 30%;
    top: 30%;
} */
.btnGroup {
  position: absolute;
  bottom: 5px;
  left: 60px;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
  -ms-overflow-style: none; /* IE 10+ */
}

header {
  border-bottom: 1px solid red;
}
</style>